<template>
  <div class="main">
    <div class="title">
      <img src="@/assets/images/citizen/ggchioce.png" alt />
      <p>（可获得一次优惠购资格）</p>
    </div>
    <div class="gift">
      <img @click="topay('1')" src="@/assets/images/managercomfirm/oil.png" alt />
      <img @click="topay('2')" src="@/assets/images/managercomfirm/phone.png" alt />
      <img @click="topay('3')" src="@/assets/images/managercomfirm/shiwu.png" alt />
    </div>
    <div style="margin-top:20px" class="title">
      <img src="@/assets/images/citizen/ggrule.png" alt />
    </div>
    <div class="content">
      <div class="rule">
        <p class="line">活动时间</p>
        <p>即日起至2020年12月31日</p>
        <p class="line">活动对象</p>
        <p>邮储银行市民卡持卡人（以下简称“持卡人”）</p>
        <p class="line">活动内容</p>
        <p style="color: #fcfe03;">1.持卡人在云闪付绑定“邮储银行市民卡”，即可1元购40元话费或盛洲食用植物调和油2.5L。</p>
        <p style="color: #fcfe03;">2.持卡人首次在微信绑定“邮储银行市民卡”，即可1元购30元话费或盛洲食用植物调和油1.8L。</p>
        <p>3.以上活动二选一，不可同时参加。</p>
        <p class="line">活动细则</p>
        <p>1.本次活动名额有限，先到先得。</p>
        <p>2.每个客户活动期间可获得一次优惠购资格，即每个客户可选择1个渠道参与活动，微信和云闪付渠道不可叠加。</p>
        <p>3.本活动中有关商品或服务由银商旅行580提供，持卡人应当自行决定是否使用商品或服务。邮储银行不对平台所提供的商品或服务的质量提供保证，在法律法规允许的范围内，邮储银行不就有关商品或服务引起的有关事宜或损害承担责任。对此，持卡人应自行直接接洽处理解决。</p>
        <p>4.客户用原手机解绑后再用新的手机号重新绑卡不算首绑客户，将不享受本次活动权益。</p>
        <p>5.任何通过非正常手段（包括但不限于作弊、系统漏洞、黑客工具、软件作弊、虚假工具等）套取权益的客户，邮储银行厦门分行有权取消其参与本次活动的权益并在必要时追究相关法律责任；如发现客户有经销、专卖等通过本活动牟利的交易行为，邮储银行厦门分行有权撤销客户在活动中享受的优惠。</p>
        <p>6.如客户获得此优惠权益后，请妥善保管所得权益，不得有意或无意泄露给他人，如权益已经使用，我行将不予以补发。</p>
        <p>7.邮储银行厦门分行有权在法律允许范围内对本活动进行解释。</p>
        <p class="line1">话费权益使用规则</p>
        <p>1.到账时间：1-10分钟即可到账，遇到月初月末高峰期会有许延迟，详细到账时间以运营商短信提醒为准（如遇运营商系统忙或者客户本人手机已欠费停机的情况下，则客户无法收到短信提醒）;</p>
        <p>2.仅限于中国移动，中国联通，中国电信充值，请认真仔细填写所需要充值的手机号码，如因用户错填手机号码导致的损失均不负责;</p>
        <p>3.此权益不记名，不挂失，不兑换现金，一经兑换不退不换，请谅解;</p>
        <p>4.权益在使用过程中如遇任何问题请咨询客服热线电话：0592-5215580。</p>
        <p class="line2">食用油兑换规则</p>
        <p>食用油可在邮储银行办卡/激活网点领取。</p>
      </div>
    </div>
    <!-- 弹窗 -->
    <div v-if="isbind" class="mask">
      <div class="user_phone">
        <div class="title">请输入信息</div>
        <p class="titleb">（以下信息为参与活动客户信息）</p>
        <div class="turn_off" @click="turnOff">
          <img src="@/assets/images//citizen/ggcha.png" alt />
        </div>
        <div class="phone">
          <img src="@/assets/images//citizen/ggname.png" alt />
          <input @blur="resetDiv" v-model="haveName" type="text" placeholder="请输入您的真实姓名" />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <input
            maxlength="6"
            @blur="resetDiv"
            v-model="haveId"
            type="text"
            placeholder="请输入您身份证后6位"
          />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggpicon.png" alt />
          <input @blur="resetDiv" v-model="haveNum" type="number" placeholder="请输入您的手机号码" />
        </div>
        <p class="toline"></p>
        <div class="auth">
          <img src="@/assets/images//citizen/ggmag.png" alt />
          <input @blur="resetDiv" v-model="authCode" placeholder="请输入手机验证码" />
          <div
            :class="second=='获取验证码'? 'get_auth' : 'read_time'"
            @click.self="toMessage"
          >{{second==='获取验证码'?'获取验证码':second+'s'}}</div>
          <!-- <div class="read_time">60</div> -->
        </div>
        <!-- <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <input
            maxlength="6"
            @blur="resetDiv"
            v-model="havestation"
            type="number"
            placeholder="用户扫描二维码自动显示网点名称"
          />
        </div>-->
        <div class="sure_btn" @click="sureBtn">确定</div>
      </div>
    </div>
    <div class="mask" v-if="actsucce">
      <div class="waititem">
        <div class="items">
          <p>领取成功</p>
          <p>请与客户确认权益是否发放成功</p>
        </div>
        <div @click="actsucce =false" class="itembtn">我知道了</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import { baseUrl } from '@/config/env.js';
import weixin from '@/components/wx/wx.js';
export default {
  data() {
    return {
      isbind: false,
      showToa: true,
      haveName: '',
      haveNum: '',
      haveId: '',
      authCode: '',
      havestation: '',
      second: '获取验证码',
      type: '',
      actsucce: false
    };
  },
  created() {
    document.querySelector('body').setAttribute('style', 'background:#4E7CF3');
  },
  mounted() {
    // this.initWxChat();
  },
  destroyed() {
    document.querySelector('body').setAttribute('style', 'background:#ffffff');
  },
  methods: {
    topay(data) {
      // if (data === '2') {
      //   Dialog.alert({
      //     title: '提示',
      //     message:
      //       '话费系统升级中，预计7月21日00时恢复充值，升级期间可选择其他礼品兑换'
      //   });
      //   return;
      // }
      this.type = data;
      this.isbind = true;
    },
    initWxChat() {
      const url = window.location.href.split('#')[0];
      const param = {
        title: '好礼转不停 积分任你拿',
        desc: '好礼转不停 积分任你拿',
        link:
          baseUrl + 'entrance/goto?redir=' + window.location.href.split('#')[1],
        imgUrl: 'http://img.580travel.com/image/youchu/shareIcon.jpg',
        localUrl: url
      };
      weixin.wxChat(this, param);
    },
    // ios键盘顶起
    resetDiv() {
      setTimeout(() => {
        const scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    // 获取验证码
    toMessage(event) {
      window.scroll(0, 0);
      if (this.second === '获取验证码') {
        this.$http
          .post('/entrance/getActivitySmsCode', {
            telphone: this.haveNum,
            source: 0
          })
          .then(res => {
            if (res.data.code === '1') {
              console.log(res);
              Toast(res.data.message);
            } else {
              this.second = 60;
              this.itl = setInterval(() => {
                if (this.second > 0) {
                  this.second--;
                } else {
                  this.second = '获取验证码';
                  clearInterval(this.itl);
                }
              }, 1000);
            }
          });
      } else {
        Toast('您点的太快了');
      }
    },
    // 确定按钮
    sureBtn() {
      if (
        this.haveName === '' &&
        /^1[3456789]\d{9}$/.test(this.haveNum) === true
      ) {
        Toast('请输入正确姓名和号码');
      } else if (this.haveId.length !== 6) {
        Toast('请输入身份证后六位');
      } else if (this.haveId.slice(0, 2) > 31) {
        Toast('请输入正确的身份证后六位');
      } else {
        this.$http
          .post('/oneYuanPurchase/userCheck', {
            // type: '1',
            idCardNo: this.haveId,
            telphone: this.haveNum,
            code: this.authCode,
            username: this.haveName
            // bankNo: this.bankNo
          })
          .then(res => {
            if (res.data.code === '0') {
              if (this.type === '2') {
                this.$router.push({
                  name: 'managerpaycenter',
                  params: {
                    username: this.haveName,
                    idCardNo: this.haveId
                  }
                });
              } else {
                this.$http
                  .post('/oneYuanPurchase/submitOrder', {
                    type: '3',
                    username: this.haveName,
                    idCardNo: this.haveId,
                    productName:
                      this.type === '1'
                        ? '油'
                        : this.type === '2'
                        ? '话费'
                        : '实物',
                    bankUserId: '',
                    phone:
                      this.type === '1'
                        ? ''
                        : this.type === '2'
                        ? this.haveNum
                        : ''
                  })
                  .then(result => {
                    console.log(result);
                    this.id = JSON.stringify(result.data.object);
                    if (result.data.code === '0') {
                      if (this.type === '3') {
                        this.actsucce = true;
                        this.haveId = '';
                        this.haveNum = '';
                        this.authCode = '';
                        this.haveName = '';
                        this.isbind = false;
                      } else {
                        this.$http
                          .post('oneYuanPurchase/topay', {
                            orderId: this.id,
                            payType: '1'
                          })
                          .then(res => {
                            console.log(res);
                            if (res.data.code === '0') {
                              window.location.href =
                                res.data.object.wechatPayURL;
                            } else {
                              Toast(res.data.message);
                            }
                            // console.log(this.id);
                          });
                      }
                    } else {
                      Toast(result.data.message);
                    }
                  });
              }
            } else {
              Toast(res.data.message);
            }
          });
      }
    },
    // 关闭验证信息弹窗
    turnOff() {
      this.isbind = false;
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 3958px;
  background-image: url(../../../assets/images/citizen/ysfbg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .topbtn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 579px;
    padding-left: 30px;
    padding-right: 30px;
    :first-child {
      margin-top: 13px;
      width: 131px;
      height: 96px;
    }
    :nth-child(2) {
      width: 127px;
      height: 127px;
    }
  }
  .title {
    margin-top: 604px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    img {
      width: 375px;
      height: 62px;
    }
    p {
      font-size: 28px;
      color: #ffffff;
      margin-top: 10px;
    }
  }
  .gift {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    img {
      width: 679px;
      height: 257px;
      margin-top: 30px;
    }
  }
  .content {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    .rule {
      width: 690px;
      height: 2324px;
      box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.3) inset;
      border-radius: 50px;
      padding-left: 67px;
      padding-top: 27px;
      padding-right: 45px;
      font-size: 26px;
      color: #ffffff;
      .line {
        width: 143px;
        height: 40px;
        background-color: #ffffff;
        border-radius: 20px;
        font-size: 28px;
        color: #ee0a3b;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .line1 {
        width: 263px;
        height: 40px;
        background-color: #ffffff;
        border-radius: 20px;
        font-size: 28px;
        color: #ee0a3b;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .line2 {
        width: 230px;
        height: 40px;
        background-color: #ffffff;
        border-radius: 20px;
        font-size: 28px;
        color: #ee0a3b;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
      }
    }
  }
  .mask {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    .user_phone {
      width: 601px;
      height: 867px;
      background-color: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .toline {
        width: 500px;
        height: 1px;
        background-color: #d9d9d9;
        margin-left: 30px;
      }
      .title {
        margin-top: 0;
        width: 100%;
        text-align: center;
        font-size: 32px;
        letter-spacing: 3px;
        color: #666666;
        padding-top: 67px;
        // margin-bottom: 60px;
      }
      .titleb {
        width: 100%;
        text-align: center;
        font-size: 26px;
        letter-spacing: 3px;
        color: #fc010d;
        margin-bottom: 20px;
      }
      .phone {
        padding-left: 30px;
        display: flex;
        height: 1.4rem;
        width: 100%;
        // border-bottom: 1px solid #d9d9d9;
        padding-bottom: 25px;
        img {
          width: 40px;
          display: block;
          align-self: center;
        }
        input {
          border: 0;
          padding-left: 34px;
          width: 80%;
          font-size: 24px;
        }
        ::-webkit-input-placeholder {
          color: #999999;
          font-size: 24px;
        }
      }
      .auth {
        padding-left: 30px;
        display: flex;
        height: 1.7rem;
        width: 100%;
        img {
          width: 40px;
          display: block;
          align-self: center;
        }
        input {
          border: 0;
          padding-left: 34px;
          width: 55%;
          font-size: 24px;
          // height: 100px;
        }
        ::-webkit-input-placeholder {
          color: #999999;
          font-size: 24px;
        }
        .get_auth {
          position: absolute;
          top: 530px;
          right: 20px;
          width: 190px;
          height: 65px;
          border-radius: 5px;
          border: solid 2px #59b7f5;
          text-align: center;
          line-height: 65px;
          font-size: 24px;
          color: #59b7f5;
          z-index: 100;
          // margin-left: 30px;
        }
        .read_time {
          align-self: center;
          width: 190px;
          height: 65px;
          border-radius: 5px;
          border: solid 2px #999999;
          text-align: center;
          line-height: 65px;
          font-size: 24px;
          color: #999999;
        }
      }
    }
    .sure_btn {
      width: 460px;
      height: 80px;
      background-color: #59b7f5;
      border-radius: 10px;
      margin: 0 auto;
      font-size: 30px;
      line-height: 80px;
      letter-spacing: 3px;
      color: #ffffff;
      text-align: center;
      margin-top: 30px;
    }
    .turn_off {
      width: 44px;
      height: 44px;
      right: 27px;
      position: absolute;
      top: 30px;
    }
    .waititem {
      width: 601px;
      height: 312px;
      background-color: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .items {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 601px;
        height: 213px;
        border-bottom: 1px solid #d9d9d9;
        :first-child {
          font-size: 30px;
          color: red;
        }
        :nth-child(2),
        :nth-child(3) {
          margin-top: 20px;
          font-size: 26px;
          color: #282828;
        }
      }
    }
    .waititem1 {
      width: 601px;
      height: 312px;
      background-color: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .items {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 601px;
        height: 213px;
        border-bottom: 1px solid #d9d9d9;
        font-size: 30px;
        color: #282828;
      }
    }
    .itembtn {
      height: 98px;
      line-height: 98px;
      text-align: center;
      font-size: 36px;
      color: #54c5ff;
    }
  }
  .act_toast {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    .toast_item {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .toast_img {
        width: 100%;
      }
      .toastitem {
        width: 435px;
        height: 80px;
        background-image: linear-gradient(
            180deg,
            #f68934 0%,
            #81857c 0%,
            #0c80c4 0%,
            #86b4b5 0%,
            #ffe8a6 0%,
            #fdc249 100%
          ),
          linear-gradient(#7408d6, #7408d6);
        background-blend-mode: normal, normal;
        box-shadow: 0px 5px 24px 0px rgba(167, 7, 45, 0.45);
        border-radius: 40px;
        margin-top: -80px;
        font-size: 32px;
        color: #e9153e;
        text-align: center;
        line-height: 80px;
      }
      .toastitem1 {
        width: 435px;
        height: 80px;
        border-width: 2px;
        border: 2px solid #fdc249;
        margin-top: 20px;
        border-radius: 40px;
        font-size: 32px;
        color: #fdc249;
        text-align: center;
        line-height: 80px;
      }
    }
  }
}
.main::before {
  content: '';
  display: table;
}
</style>
